<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>${ecard.name}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="decorator" content="default" />
<meta name="viewport"
	content="width=device-width initial-scale=1.0  maximum-scale=1.0">
	<script type="text/javascript" src="${ctxStatic}/mobile-template/ecard/${theme }/jquery.min.js"></script>	
	<script type="text/javascript" src="${ctxStatic}/mobile-template/ecard/${theme }/jquery.mobile-1.3.0.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/mobile-template/ecard/${theme }/jquery.mobile-1.3.0.css">
	<style type="text/css">
		.clearfix {
		  *zoom: 1;
		}
		.clearfix:before,
		.clearfix:after {
		  display: table;
		  line-height: 0;
		  content: "";
		}
		.clearfix:after {
		  clear: both;
		}
		a{text-decoration:none;}
		body{
  			font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tohoma,sans-serif;
			color:#8f8f8f;
		}
		#header{
			height:49px;
			line-height:49px;
			border:none;
			background:url(${ctxStatic}/mobile-template/ecard/${theme }/header_bg.png) repeat-x #e6e6e6;
		}
		#header .ui-title{
			margin:0;
		}
		#content{
			background:url(${ctxStatic}/mobile-template/ecard/${theme }/content_bg.png) no-repeat center top #e6e6e6;
			padding:0 15px;
		}
		#content .card{
			width:100%;
		}

		#content .card .pic{
			margin-top:20px;
			float:left;
			width:40%;
		}
		#content .card .pic .thumb{
			background:#fff;
			padding:5px;
			display:inline-block;
		}
		#content .card .pic .thumb img{margin:0 !important;}
		#content .card .detail{
			width:60%;
			float:left;
			text-align:center;
			margin-top:20px;
		}
		#content .card .detail .person{
  			font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tohoma,sans-serif;
			font-size:16px;
			color:#403f3d;
			margin:40px 0px;
		}
		#content .colum{
			margin-top:10px;
		}
		#content .colum .title{
  			font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tohoma,sans-serif;
			font-size:16px;
			color:#37abd0;
			height:30px;
			line-height: 30px;
			margin:0;
		}
		#content .colum .content{
			border:1px solid #dcdcdc;
			background:#f8f8f8;
			padding:10px;
		}
		#content .colum .content dl dt,#content .colum .content dl dd{
			float:left;
			height:24px;
			line-height:24px;
		}
		#content .colum .content dl dt{
			clear:left;
  			font-family: "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tohoma,sans-serif;
		}
		.card,.colum,.footer{
			float:left;
		}
		.colum{
			width:100%;
		}
		.colum .content{
			display:block;
			width:transparent;
		}
		.share{
			text-align:center;
			padding:40px;
		}
		.btn_top{
			position:fixed;
			bottom:20px;
			right:10px;
		}
	</style>
</head>
<body class="ui-mobile-viewport ui-overlay-c">
	<link
		href="${ctxStatic}/mobile-template/ecard/${theme }/jiathis_counter.css"
		rel="stylesheet" type="text/css">
	<script src="${ctxStatic}/mobile-template/ecard/${theme }/jiathis.php"
		charset="utf-8"></script>
	<link href="${ctxStatic}/mobile-template/ecard/${theme }/jiathis_share.css" rel="stylesheet" type="text/css">
	<iframe frameborder="0"
		style="position: absolute; display: none; opacity: 0; max-height: 300px;"></iframe>
	<div class="jiathis_style"
		style="position: absolute; z-index: 1000000000; display: none; top: 50%; left: 50%; overflow: auto;"></div>
	<div class="jiathis_style"
		style="position: absolute; z-index: 1000000000; display: none; overflow: auto;"></div>
	<iframe frameborder="0" src="http://v3.jiathis.com/code_mini/jiathis_utility.html"
		style="display: none; max-height: 300px;"></iframe>
	<div data-role="page" id="main-page" data-url="main-page" tabindex="0"
		class="ui-page ui-body-c ui-page-active" style="min-height: 607px;">
		<a name="top" id="top" class="ui-link"></a>
		<header id="header" data-role="header" class="ui-header ui-bar-a"
			role="banner">
			<h1 class="ui-title" role="heading" aria-level="1">${ecard.name}的二维码电子名片</h1>
		</header>
		<article id="content">
			<div class="card">
				<div class="pic">
					<div class="thumb">
						<img src="${ctxFront }/ecard/${ecard.id }.jpg"
							style="float: left; margin: 10px; width: 124px; height: 125px;">
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="detail">
					<p class="person">
						<span class="name">${ecard.name}</span>
					</p>
					<p class="tool">
						<a class="btn btn-success ui-link"
							href="http://2weima.hdzhx.com/EcardMembers/vcf/Wrj_9f"> <img
							src="${ctxStatic}/mobile-template/ecard/${theme }/btn_save.png" width="60px" alt="">
						</a> <a href="#share"
							class="ui-link"> <img src="${ctxStatic}/mobile-template/ecard/${theme }/btn_share.png" width="60px"
							alt="">
						</a>
					</p>
				</div>
			</div>
			<div class="colum">
				<h2 class="title">个人简介</h2>
				<div class="content">
					<p>${ecard.description }</p>
					 
				</div>
			</div>
			<div class="colum">
				<h2 class="title">个人信息</h2>
				<div class="content">
					<dl>
						<dt>姓名</dt>
						<dd>${ecard.name }</dd>

						<dt>电话</dt>
						<dd>${ecard.tel }</dd>

						<dt>邮箱</dt>
						<dd>${ecard.mail }</dd>
					</dl>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="clearfix"></div>
			<a href="#top"
				class="btn_top ui-link" data-ajax="false" title=""> <img
				src="${ctxStatic}/mobile-template/ecard/${theme }/top.png" alt="" width="30px" height="30px">
			</a>
		</article>
		<div class="footer" style="width: 100%">
			<p style="text-align: center">
				技术支持 <a href="#power"
					onclick="$(&#39;#power&#39;).toggle()" class="ui-link"> 邯郸智讯</a>
			</p>
			<div id="power" style="display: none; text-align: center">
				<div style="margin: 10px;">
					<div class="aboutus">
						<p>邯郸智讯</p>
						<p>
							客服电话： <a href="tel:0310-7056607" class="ui-link">0310-7056607</a>
						</p>
						<p>客服QQ: 66587811</p>
						<p>客服邮箱: jakemnase@163.com</p>
						<p>公司地址: 邯郸市丛台区帝豪雅居B座11楼08室</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		//关闭全局ajax
		$(document).bind("pageinit", function(){
		    $.mobile.ajaxEnabled = false;
		});
	</script>

	<script type="text/javascript">
    try {
        window.onload = autoSize;
        function autoSize(){
            $("img,iframe,embed").each(function(){
                if($(this).width() > $(this).parent().width() || $(this).width() > $(window).width()){
                    $(this).css('max-width',"100%");
                }
            });
            $("iframe").each(function(){
                $(this).css('max-height',$(this).width());
            })
        }
    }catch (e) {
    }
</script>
	<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
		<span class="ui-icon ui-icon-loading"></span>
		<h1>loading</h1>
	</div>
	<div id="media_floatingBar"
		style="position: absolute; left: 391px; top: 737px;">
		<a id="002" title="放大镜"
			style="background-image: url(chrome-extension://fjccknnhdnkbanjilpjddjhmkghmachn/images/floating_bar_zoom.png);"></a><a
			id="003" title="设置背景桌面"
			style="background-image: url(chrome-extension://fjccknnhdnkbanjilpjddjhmkghmachn/images/floating_bar_bg.png);"></a><a
			id="005" title="保存图片"
			style="background-image: url(chrome-extension://fjccknnhdnkbanjilpjddjhmkghmachn/images/floating_bar_save.png);"></a>
	</div>
</body>
</html>